<template>
  <div class="agencylist">
    <div class="list">
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%">
        <el-table-column type='index' label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="92" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="agency_level"
          label="代理级别"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          label="代理区域"
          width="196"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="manaBounus"
          label="管理津贴"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="soldBounus"
          label="提现金额"
          width="105"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cash"
          label="销售奖励"
          width="105"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="allcount"
          label="总金额"
          width="105"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="money_opera"
          label="操作"
          align="center"
        >
        <el-button type="text" @click="dialogTableVisible = true" 
            >钱包明细</el-button
          >
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <div class="container_fy">
        <el-pagination
          :page-size="4"
          :current-page.sync="currentPage"
          :page-sizes="[4, 8]"
          layout="total,sizes,prev,pager,next,jumper"
          :hide-on-single-page="false"
          :total="total"
          @size-change="sizeChange"
        >
        </el-pagination>
      </div>

      <!-- 钱包明细弹框 -->
      <el-dialog title="钱包明细" :visible.sync="dialogTableVisible">
        <div class="hx"></div>
        <div>
          <table class="all_tb2">
            <tr>
              <th>总金额</th>
              <th>总销售奖励</th>
              <th>总管理津贴</th>
              <th>总提现金额</th>
              <th>
                <div class="name_input2">
                  收支类型：<input type="text" placeholder="全部" />
                </div>
              </th>
              <th>
                <!-- 选择日期范围 -->
                收支日期：
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </th>
            </tr>
            <tr>
              <td>0元</td>
              <td>0元</td>
              <td>0元</td>
              <td>0元</td>
            </tr>
          </table>
        </div>

        <!-- 单选、个人信息 -->
        <div class="artnerlist_xx">
          <span class="srzc">支出\收入:</span>
          <el-radio v-model="radio" label="1">全部</el-radio>
          <el-radio v-model="radio" label="2">支出(10000)元</el-radio>
          <el-radio v-model="radio" label="3">收入(0元)</el-radio>
          <!-- <span class="srzc">个人信息</span> -->
          <el-tooltip
            content="暂无个人信息"
            placement="top"
            effect="light"
            :class="'artnerlist_grxx'"
          >
            <el-button>个人信息</el-button>
          </el-tooltip>

          <!-- 导出数据到Excel、 查询、重置-->
          <el-button type="primary" @click="excelDate" class="withdraw_excel4"
            >导出数据到Excel</el-button
          >
          
          <el-button  class="reset3">
            <i class="el-icon-refresh-right"></i> 重置</el-button
          >
          <el-button class="found3">
            <i class="el-icon-search"></i> 查询</el-button
          >
          <!-- <router-link to="" tag="div" :class="'found3'">
            <i class="el-icon-search"></i>查询
          </router-link> -->
        </div>

        <!-- 钱包明细表格 -->
        <el-table :data="gridData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%">
          <el-table-column
            prop="wallet_id"
            label="ID"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_name"
            label="姓名"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_tel"
            label="电话"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_money"
            label="金额"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="income_expend"
            label="收入支出"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payment_type"
            label="收支类型"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payment_date"
            label="收支时间"
            width="220"
            align="center"
          >
          </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <el-pagination
          :page-size="4"
          :current-page.sync="currentPage"
          :page-sizes="[4, 8]"
          layout="total,sizes,prev,pager,next,jumper"
          :hide-on-single-page="false"
          :total="2"
          @size-change="sizeChange"
        >
        </el-pagination>

        <div class="hx2"></div>
        <!-- <div slot="footer" class="partner-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false"
            >确 定</el-button
          >
        </div> -->
      </el-dialog>



    </div>
  </div>
</template>

<script>
import {Bus} from "../../Bus/index"
import {
  apiGetAgentSum,
  apiGetPartnerSum,
  apiGetKeyNameInfo,
  apiGetParNameInfo,
  apiGetWallettInfo,
  apiGetDateInOut,
} from "@/api/wallet";
// @ is an alias to /src

export default {
  name: "AgencyList",
  components: {},
  // created(){
  //   this.onload()
  // },
  data() {
    return {
      tableData: [
        {
          // agency_level: "市服务站",
        },
      ],

      // 选择日期范围
      value1: "",
      // 单选
      radio: "1",

      // 分页
      total: 0,
      pageSize: 4,
      currentPage: 1,

      // 弹框数据
      gridData: [
        {
          wallet_id: 7,
          wallet_name: "中通信通",
          wallet_tel: 13688473206,
          wallet_money: 301,
          income_expend: "支出",
          payment_type: "挂号",
          payment_date: "2020-12-02 17:11:20",
        },
        {
          wallet_id: 7,
          wallet_name: "中通信通",
          wallet_tel: 13688473206,
          wallet_money: 301,
          income_expend: "支出",
          payment_type: "挂号",
          payment_date: "2020-12-02 17:11:20",
        },
      ],
      dialogTableVisible: false,
    };
  },

  methods:{

    // onload(){
    //     apiGetParNameInfo({}).then((res) => {
    //       console.log(res);
    //       this.tableData = res.msg;
    //     });
    // },

    // 分页
    sizeChange(val) {
      this.pageSize = val;
    },
  },

  mounted(){
    // 接受WalletList.vue传过来的数据
    // console.log(this.tableData);
    Bus.$on("tabledata2",(value)=>{
      // console.log(value);
      this.tableData =value;
      this.total = value.length;

       for (let i = 0; i < value.length; i++) {
          this.tableData[i].agency_level = '市';
        }
    })
  },
};
</script>

<style scoped>
@import '../../style/css/AgencyList.css';

</style>